@font-face {
    font-family: electronicFont;
    src: url(/img/planCheck/operationsCockpit_ZDJ/DS-DIGIT.TTF);
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: url(/img/planCheck/operationsCockpit_ZDJ/bg.jpg) no-repeat #000;
    background-size: 100% 100%;
    /* 行高是字体1.15倍 */
    line-height: 1.15;
}

.container {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.header {
    position: relative;
    background: url(/img/planCheck/operationsCockpit_ZDJ/head_bg.png) no-repeat top center;
    background-size: 100% 100%;
    height: 1.25rem;

    .header_title {
        font-size: 0.475rem;
        color: #fff;
        text-align: center;
        line-height: 1rem;
    }

    .time_box {
        position: absolute;
        top: 0;
        right: 0.375rem;
        line-height: 0.9375rem;
        font-size: 0.25rem;
        color: rgba(255, 255, 255, 0.7);
    }
}

.content {
    position: relative;
    display: flex;
    justify-content: space-around;
    flex: 1;
    padding: 0.0625rem 0.125rem;
    overflow: hidden;

    .column {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 27.272727272727%;
        min-width: 27.272727272727%;
        max-width: 27.272727272727%;
        overflow: hidden;

        &:nth-child(2) {
            width: 45.454545454545%;
            min-width: 45.454545454545%;
            max-width: 45.454545454545%;
            padding: 0 0.25rem 0.2125rem;
            box-sizing: border-box;
            overflow: hidden;
        }
    }

    .panel {
        position: relative;
        height: 32%;
        border: 1px solid rgba(25, 186, 139, 0.17);
        background: rgba(255, 255, 255, 0.04) url(/img/planCheck/operationsCockpit_ZDJ/panel_bg.png);
        padding: 0.125rem;

        &:before {
            position: absolute;
            top: -2px;
            left: -2px;
            content: "";
            width: 10px;
            height: 10px;
            border-top: 2px solid #02a6b5;
            border-left: 2px solid #02a6b5;
        }

        &:after {
            position: absolute;
            top: -2px;
            right: -2px;
            content: "";
            width: 10px;
            height: 10px;
            border-top: 2px solid #02a6b5;
            border-right: 2px solid #02a6b5;
        }

        .panel_footer {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;

            &:before {
                position: absolute;
                bottom: -2px;
                left: -2px;
                content: "";
                width: 10px;
                height: 10px;
                border-bottom: 2px solid #02a6b5;
                border-left: 2px solid #02a6b5;
            }

            &:after {
                position: absolute;
                bottom: -2px;
                right: -2px;
                content: "";
                width: 10px;
                height: 10px;
                border-bottom: 2px solid #02a6b5;
                border-right: 2px solid #02a6b5;
            }
        }
    }

    .chart {
        width: 100%;
        height: 100%;
    }

    .map_content {
        display: flex;
        flex-direction: column;
        flex: 1;

        .btn_group {
            display: flex;
            justify-content: center;
            align-items: flex-start;
            height: 40px;

            .btn_box {
                width: 155px;
                height: 31px;
                background: url(/img/planCheck/operationsCockpit_ZDJ/form.png) no-repeat;
                background-size: 100% 100%;
                text-align: center;

                button {
                    border: none;
                    outline: none;
                    background: none;
                    color: #fff;
                    line-height: 31px;
                    padding: 0 26px;
                    cursor: pointer;
                }
            }

            .active {
                background: url(/img/planCheck/operationsCockpit_ZDJ/form_active.png);
            }
        }

        .dashboard {
            display: flex;
            justify-content: space-around;
            flex: 2;
            padding: 0.0625rem 0.125rem;

            .dashboard_item {
                width: 30%;
                min-width: 30%;
                max-width: 30%;

                &:nth-child(2) {
                    width: 40%;
                    min-width: 40%;
                    max-width: 40%;
                }
            }
        }

        .map {
            flex: 4;
        }
    }
    .table_box {
        position: relative;
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 100%;
        overflow: hidden;

        .table_header {
            height: 0.55rem;

            .table_li {
                line-height: 0.25rem;
                color: #02a6b5;
                font-size: 0.2rem;
            }
        }

        .table_body {
            display: none;
            overflow: hidden;
        }

        .table_li {
            display: flex;
            justify-content: space-around;
            line-height: 0.275rem;
            padding: 0.125rem 0.0625rem;
            color: #fff;
            font-size: 0.15rem;
            *zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/

            &::after {
                content: "";
                display: block;
                height: 0;
                clear: both;
                visibility: hidden;
            }

            .li_item {
                width: 25%;
                padding: 0.025rem 0.125rem;

                .item_con {
                    width: 100%;
                    word-break: break-all;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }
            }
        }
    }
}